<template>
	<view>
		<!--  租车合同-->
		<template>
			<view class="contractItem">
				<view class="titlBox">
					<text class="title">租车合同</text>
					<text v-if="rentContractUrl" style="color: #3c87f5;font-size: 28rpx"
						@click="previewContract(rentContractUrl)">查看合同</text>
				</view>
				<template v-if="electronicContractEnable==1">
					<view class="contractContent">
						<view class="contentRow flex-row-center-sb">
							<text class="text-name">合同编号</text>
							<text class="text-value">{{ rentContractInfo.contractNo|filterNull }}</text>
						</view>

						<view class="contentRow flex-row-center-sb">
							<text class="text-name">出租方签署</text>
							<text class="text-value">{{ orderDetail.orderInfo.authenticationName|filterNull }}</text>
						</view>

						<view class="contentRow flex-row-center-sb">
							<text class="text-name">承租方签署</text>
							<view>
								<text class="text-value">{{ orderDetail.customerInfo.memberName|filterNull }}</text>
								<text
									v-if="orderDetail.customerInfo.authenticationStatus == 1 || orderDetail.customerInfo.authenticationStatus == 3"
									class="text-value" style="margin-left: 10rpx;color: #3c87f5"
									@click="sendAuthentication">
									电子合同认证
								</text>
							</view>
						</view>

						<view class="contentRow flex-row-center-sb">
							<text class="text-name">合同状态</text>
							<text
								class="text-value">{{ rentContractInfo.contractStatus|contractStatus|filterNull }}</text>
						</view>
					</view>
					<template v-if="rentContractUrl">
						<template v-if="rentContractInfo.contractSource==2">
							<view class="bottomOpertionBox flex-row-end" v-if="rentContractInfo.contractStatus<3">
								<text class="btn otherBtn" v-if="rentContractInfo.contractStatus<=2"
									@click="contractOpertion(rentContractInfo,3, 1)">废 弃</text>
								<text class="btn" v-if="rentContractInfo.contractStatus==1"
									@click="contractOpertion(rentContractInfo,1, 1)">出租方补签</text>
								<text class="btn" v-if="rentContractInfo.contractStatus==2"
									@click="contractOpertion(rentContractInfo,2, 1)">承租方补签</text>
							</view>
						</template>

					</template>
					<template v-else>
						<view class="bottomOpertionBox flex-row-end">
							<text class="btn" @click="contractOpertion(rentContractInfo,-1,1)">发起合同</text>
						</view>
					</template>

				</template>

			</view>
		</template>

		<!--续租合同-->
		<template v-if="reletContractList.length>0">
			<block v-for="(reletContractInfo, index) in reletContractList" :key="reletContractInfo.reletId">
				<view class="contractItem">
					<view class="titlBox">
						<text class="title">续租合同:(编号:{{reletContractInfo.reletId}})</text>
						<text v-if="reletContractInfo.rentContractUrl" style="color: #3c87f5;font-size: 28rpx"
							@click="previewContract(reletContractInfo.rentContractUrl)">查看合同</text>
					</view>
					<template v-if="electronicContractEnable==1">
						<view class="contractContent" v-if="reletContractInfo.contractSource==2">
							<view class="contentRow flex-row-center-sb">
								<text class="text-name">合同编号</text>
								<text class="text-value">{{ reletContractInfo.contractNo|filterNull }}</text>
							</view>

							<view class="contentRow flex-row-center-sb">
								<text class="text-name">出租方签署</text>
								<text
									class="text-value">{{ orderDetail.orderInfo.authenticationName|filterNull }}</text>
							</view>

							<view class="contentRow flex-row-center-sb">
								<text class="text-name">承租方签署</text>
								<view>
									<text class="text-value">{{ orderDetail.customerInfo.memberName|filterNull }}</text>
									<text
										v-if="orderDetail.customerInfo.authenticationStatus == 1 || orderDetail.customerInfo.authenticationStatus == 3"
										class="text-value" style="margin-left: 10rpx;color: #3c87f5"
										@click="sendAuthentication">
										电子合同认证
									</text>
								</view>
							</view>

							<view class="contentRow flex-row-center-sb">
								<text class="text-name">合同状态</text>
								<text
									class="text-value">{{ reletContractInfo.contractStatus|contractStatus|filterNull }}</text>
							</view>
						</view>
						<template v-if="reletContractInfo.rentContractUrl">
							<template v-if="reletContractInfo.contractSource==2">
								<view class="bottomOpertionBox flex-row-end" v-if="reletContractInfo.contractStatus<3">
									<text class="btn otherBtn" v-if="reletContractInfo.contractStatus<=2"
										@click="contractOpertion(reletContractInfo,3, 2)">废 弃</text>
									<text class="btn" v-if="reletContractInfo.contractStatus==1"
										@click="contractOpertion(reletContractInfo,1, 2)">出租方补签</text>
									<text class="btn" v-if="reletContractInfo.contractStatus==2"
										@click="contractOpertion(reletContractInfo,2, 2)">承租方补签</text>
								</view>
							</template>
						</template>
						<template v-else>
							<view class="bottomOpertionBox flex-row-end">
								<text class="btn" @click="contractOpertion(reletContractInfo,-1,2)">发起合同</text>
							</view>

						</template>

					</template>

				</view>
			</block>
		</template>


	</view>
</template>

<script>
	import * as contractApi from '@/api/order-api'
	import settings from '@/settings'
	import {
		filterNull
	} from "@/utils/filters";

	export default {
		data() {
			return {
				baseUrl: settings.baseImageUrl,
				orderDetail: {
					customerInfo: {},
					orderInfo: {}
				},
				rentContractInfo: {},
				reletContractList: [],
				orderNo: ''
			};
		},
		computed: {
			electronicContractEnable() {
				return this.$store.state.initData.initData.electronicContractEnable;
			},
			rentContractUrl() {
				let rentContractUrl = null;
				if (this.rentContractInfo.contractSource) {
					const contractFileAddress = this.rentContractInfo.contractFileAddress;
					let containerStr = new RegExp("https");
					const isHttp = containerStr.test(contractFileAddress);
					if (isHttp) {
						rentContractUrl =  contractFileAddress;
					} else {
						rentContractUrl = this.baseUrl + encodeURIComponent(this.rentContractInfo.contractFileAddress);
					}
				}
				return rentContractUrl;
			}
		},
		onLoad(op) {
			this.orderNo = op.orderNo;
			this.getOrderDetail();
			this.getOrderContract();
		},
		methods: {
			getOrderDetail() {
				contractApi.detail(this.orderNo).then(res => {
					this.orderDetail = res.data;
				})
			},

			getOrderContract() {
				contractApi.orderContract(this.orderNo).then(res => {
					this.rentContractInfo = res.data.carRental || {};
					this.reletContractList = res.data.renewal || [];
					if (this.reletContractList.length > 0) {
						this.reletContractList = this.reletContractList.map(item => {
							let rentContractUrl = null;
							if (item.contractSource) {
								const contractFileAddress = item.contractFileAddress;
								let containerStr = new RegExp("https");
								const isHttp = containerStr.test(contractFileAddress);
								if (isHttp) {
									rentContractUrl = contractFileAddress
								} else {
									rentContractUrl = this.baseUrl + encodeURIComponent(item
										.contractFileAddress);
								}
							}
							this.$set(item, 'rentContractUrl', rentContractUrl);
							return item;
						})
					}
				})
			},
			contractOpertion(contractInfo, type, businessType) {
				let alertMsg = '';
				switch (type) {
					case -1: //发起合同
						alertMsg = '确认发起合同吗?';
						this.applyContract(contractInfo, alertMsg, businessType);
						break
					case 1: //出租方签署
						alertMsg = '确认发起合同签署吗?';
						this.updateContractStatus(1, contractInfo, alertMsg)
						break
					case 2: //承租方签署
						alertMsg = '确认发起合同签署吗?';
						this.updateContractStatus(2, contractInfo, alertMsg)
						break
					case 3: //废弃
						alertMsg = '确认废弃合同吗?';
						this.updateContractStatus(0, contractInfo, alertMsg)
						break
					default:
						break
				}
			},
			applyContract(contractInfo, alertMsg, businessType) {
				uni.showModal({
					title: '提示',
					content: alertMsg,
					cancelText: '取消',
					confirmText: '确定',
					success: (modalRes) => {
						if (modalRes.confirm) { //确定
							contractApi.addContract({
								memberNo: this.orderDetail.customerInfo.memberNo,
								takeStoreId: this.orderDetail.orderInfo.takeStoreId,
								orderNo: this.orderNo,
								businessType: businessType,
								reletId: contractInfo.reletId
							}).then(res => {
								this.getOrderContract();
							})
						}
					}
				})

			},
			updateContractStatus(contractStatus, contractInfo, alertMsg) {
				uni.showModal({
					title: '提示',
					content: alertMsg,
					cancelText: '取消',
					confirmText: '确定',
					success: (modalRes) => {
						if (modalRes.confirm) { //确定
							contractApi.updateContractStatus({
								contractStatus: contractStatus,
								id: contractInfo.id
							}).then(res => {
								this.getOrderContract();
							})
						}
					}
				})
			},
			//客户发起认证
			sendAuthentication(row) {
				uni.showModal({
					title: '提示',
					content: '确定发起认证吗?',
					cancelText: '取消',
					confirmText: '确定',
					success: (modalRes) => {
						if (modalRes.confirm) { //确定
							contractApi.memberCertification(this.orderDetail.customerInfo.memberNo).then(
								res => {
									uni.$u.toast('发起认证成功');
									this.getOrderContract();
								})
						}
					}
				})
			},
			// 预览合同
			previewContract(previewUrl) {
				console.log('预览合同', previewUrl);
				const webUrl = previewUrl;
				uni.getSystemInfo({
					success: (res) => {
						if (res.platform === 'android') {
						     uni.showLoading({
						     	title:'加载中...'
						     })
							wx.downloadFile({
								url: webUrl,
								success: function(res1) {
									uni.hideLoading();
									console.log('下载成功');
									const filePath = res1.tempFilePath;
									wx.openDocument({
										filePath: filePath,
										success: (res2) => {
											console.log('打开文档成功');
										},
										fail: (error) => {
											console.log(error);
										}
									})
								},
								fail:function(error){
									uni.hideLoading();
									console.log('下载失败',error);
								}
							})
						} else {
							uni.navigateTo({
								url: '/pages/other/other?webUrl=' + webUrl
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contractItem {
		margin: 20rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 24rpx;

		.titlBox {
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				font-weight: bold;
				font-size: 28rpx;
				color: #333;

				&::before {
					content: '';
					display: inline-block;
					position: relative;
					top: 2rpx;
					width: 8rpx;
					height: 24rpx;
					background: #2879FF;
					border-radius: 4rpx;
					margin-right: 10rpx;
				}
			}
		}

		.contractContent {
			border-top: 2rpx solid #F5F5F5;
			border-bottom: 2rpx solid #F5F5F5;
			padding: 20rpx 0;

			.contentRow {
				padding: 12rpx 0;
				font-size: 28rpx;

				.text-name {
					color: #666666;
				}

				.text-value {
					color: #333333;
				}
			}
		}

		.bottomOpertionBox {
			padding: 32rpx 0rpx;

			.btn {
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background-color: #1673FF;
				color: #FFFFFF;
				font-size: 26rpx;
				border-radius: 30rpx;
				margin-left: 20rpx;
				padding: 0 30rpx;
			}

			.otherBtn {
				background-color: #FFFFFF;
				color: #1673FF;
				border: 2rpx solid #1673FF;
			}
		}

	}
</style>